<template>
  <main class="container" v-if="flag">
    <main class="content" v-if="list.length>0">
      <!-- 商品模块 -->
      <div class="goods_list" v-for="item in list" :key="item.id">
        <!-- 商品卡片 -->
        <van-swipe-cell class="goods_item">
          <!-- 购物车复选框上双向绑定数据 -->
          <van-checkbox v-model="item.checked" class="selected"></van-checkbox>
          <div class="goods_box">
            <van-card
              class="goods_card"
              :num="item.count"
              :price="((item.goods_info.price * item.count) / 100).toFixed(2)"
              :desc="item.goods_info.brand"
              :title="item.goods_info.name"
              :thumb="item.goods_info.pic_url"
            >
              <template #tags>
                <van-tag plain type="primary">{{
                  item.goods_info.tags
                }}</van-tag>
              </template>
              <template #footer>
                <!-- 步进器 -->
                <van-stepper v-model="item.count" @change="countChange(item)" />
              </template>
            </van-card>
          </div>
          <!-- 删除滑块 -->
          <template #right>
            <van-button
              @click="deleteGood(item.id)"
              square
              class="delete-button"
              type="danger"
              >删除</van-button
            >
          </template>
        </van-swipe-cell>
      </div>
    </main>
    <van-empty v-else description="购物车无商品">
      <van-button round type="primary" class="bottom-button" @click="router.replace('/home')">去首页</van-button>
    </van-empty>
    <!-- 底部 提交订单 -->
    <van-submit-bar v-if="list.length>0" @submit="onSubmit" class="submit" :price="totalPrice" button-text="提交订单">
      <van-checkbox :checked="isAllchecked" @click="checkedAll">全选</van-checkbox>
    </van-submit-bar>
  </main>
  <!-- 没登录显示 -->
  <van-empty v-else description="未登录">
      <van-button round type="primary" style="width:160px" @click="router.replace('/login')">请先登录</van-button>
  </van-empty>
</template>
<script setup>
import { getToken } from "@/utils/token";
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import {useRouter} from 'vue-router'
// 从vant里面引入方法
import { showConfirmDialog,showSuccessToast,showFailToast } from "vant";
// 引入购物车仓库
import useCartInfo from "@/stores/useCartInfo";
// 购物车相关接口
import { cartEdit, cartDelete } from "@/api/cart";

// 判断是是否登录 本地有token
let flag = ref(getToken() ? true : false);

// 路由实例
let router=useRouter()
// 购物车仓库
let cartStore = useCartInfo();
// 从仓库结构出list变成响应式
let { list } = storeToRefs(cartStore);

//修改购物车数量
let countChange = async (item) => {
  // 后端修改购物车数量
  await cartEdit({ id: item.id, count: item.count, goods_id: item.goods_id });
};

// 删除购物车
let deleteGood =(id) => {
  showConfirmDialog({
    title: "确认删除",
    message:
      "是否确认删除该商品",
  })
    .then(async() => {
      // 删除购物车商品接口
      await cartDelete({ ids: [id] });
      // 更新购物车仓库数据
      cartStore.getCartList();
      showSuccessToast('删除成功')
    })
    .catch(() => {
    }); 
};

// 全选和反选
let checkedAll=()=>{
  // isAllchecked是计算属性 全选为false 没全选为true
  let bol=!isAllchecked.value;
  list.value.forEach(item=>item.checked=bol)
}

// 计算属性
let isAllchecked=computed(()=>{
    return list.value.every(item=>item.checked===true)
})

// 选中商品的总价
let totalPrice=computed(()=>{
  let total=0;
  list.value.forEach(item=>{
    if(item.checked){
      total+=item.count*item.goods_info.price;
    }
  })
  return total
})

// 底部提交订单
let onSubmit=()=>{
  // 判断是否有选择商品   有就跳转到地址选择
  let checkList=list.value.filter(item=>item.checked);
  // 选中商品的id
  let ids=checkList.map(item=>item.id);
  if(checkList.length>0){
    router.push(`/address-list?isCart=1&checkGoodsId=${ids}`)
  }else{
    showFailToast('请选择购物车商品')
  }
}
</script>

<style lang="less" scoped>
.delete-button {
  height: 100%;
}

.container {
  .bottom-button {
    width: 160px;
    height: 40px;
  }
  .login_btn {
    width: 280px;
  }
  main.content {
    margin-bottom: var(--van-submit-bar-height);
    .goods_list {
      .goods_item {
        position: relative;
        .selected {
          position: absolute;
          z-index: 2;
          left: 8px;
          top: 46px;
        }
        .goods_box {
          background: #f7f8fa;
          margin-top: 10px;
          .goods_card {
            margin-left: 30px;
          }
        }
        .delete-button {
          width: 100%;
          height: 100%;
        }
      }
    }
    .is_null {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 55vh;
      text-align: center;
      p.cart_tip {
        font-size: 18px;
      }
      .to_btn {
        margin-top: 16px;
        width: 180px;
      }
    }
  }
  .submit {
    bottom: var(--van-submit-bar-height);
  }

}
</style>

